// 设备样式来源： https://github.com/picturepan2/devices.css
@use '_device/devices';

$devices: (
  "macbook": (
    width: 740px,
    height: 432px,
  ),
  "macbook-pro": (
    width: 740px,
    height: 434px,
  ),
  "macbook-pro-2018": (
    width: 740px,
    height: 444px,
  )
);

// 为每种设备生成具体类
.device-base {
  @each $name, $spec in $devices {
    &-#{$name} {
      --device-base-width: #{map-get($spec, width)};
      --device-base-height: #{map-get($spec, height)};
    }
  }
}

.device-transform-wrapper {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: calc(var(--device-base-height) * var(--device-scale, 1)); // 动态高度
    /* 视觉容器-承担缩放 */
    .device-visual-container {
        transform: scale(var(--device-scale));
        transform-origin: top center; /* 保持子元素定位基准不变 */
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
    }
}